<template>
  <div class="head">
    <el-col :span="4">
      <el-select v-model="select" size="large" placeholder="所属门店" style="width: 200px;">
        <el-option label="全局分类" value="1" />
        <el-option label="杭州良渚永旺Mall" value="2" />
        <el-option label="杭州城西银泰城MALL" value="3" />
        <el-option label="新峰商务大楼" value="4" />
      </el-select>
    </el-col>
    <el-button type="primary" size="default" :icon="Search">搜索</el-button>
    <el-button type="success" size="default" :icon="Plus" @click="dialogFormVisible = true">添加</el-button>
  </div>
  <div>
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column label="ID" width="80%">
        <template #default="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column property="name" label="分类名称" show-overflow-tooltip />
      <el-table-column property="type" label="编号/类型" />
      <el-table-column label="图标">
        <template #default="scope">
          <img :src="scope.row.pic" v-if="scope.row.icon" style="width:70px;height:40px;">
          <p v-else>-</p>
        </template>
      </el-table-column>
      <el-table-column label="封面">
        <template #default="scope">
          <img :src="scope.row.pic" v-if="scope.row.pic" style="width:70px;height:40px;">
          <p v-if="!scope.row.pic">-</p>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template #default="scope">
          <el-button type="success" v-show="scope.row.isUse == true" plain>启用</el-button>
          <el-button type="danger" v-show="scope.row.isUse == false" style="margin-left: 0;" plain>禁用</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" link>编辑</el-button>
          <el-button type="danger" link @click="remove(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button type="danger" @click="onRemove">批量删除</el-button>
    </div>
  </div>
  <el-dialog v-model="dialogFormVisible" title="增加分类" :key="dialogFormVisible">
    <el-form :model="form" ref="addForm">
      <el-form-item label="名称" :rules="[{ required: true, message: '不能为空' }]" prop="name" label-width="100px">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="链接地址" prop="linkUrl" label-width="100px">
        <el-input v-model="form.linkUrl" autocomplete="off" />
      </el-form-item>
      <el-form-item label="备注" prop="remark" label-width="100px">
        <el-input v-model="form.remark" autocomplete="off" />
      </el-form-item>
      <el-form-item label="类型" prop="type" label-width="100px">
        <el-input v-model="form.type" autocomplete="off" style="width:100px;" />
        &nbsp;<span>自定义类型，32个字以内</span>
      </el-form-item>
      <el-form-item label="编号" prop="key" label-width="100px">
        <el-input v-model="form.key" autocomplete="off" style="width:100px;" />
        &nbsp;<span>自定义类型，32个字以内</span>
      </el-form-item>
      <el-form-item label="所属门店" prop="shopId" label-width="100px">
        <el-select v-model="form.shopId" placeholder="所属门店">
          <el-option :label="item.name" v-for="item in shops" :key="item.id" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="上级分类" prop="pid" label-width="100px">
        <el-select v-model="form.pid" placeholder="Please select a zone">
          <el-option label="顶级分类" value="" />
          <el-option :label="item.name" v-for="item in news" :key="item.id" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="上传图标" prop="icon" label-width="100px">
        <el-upload class="avatar-uploader" action="" :auto-upload="false" :show-file-list="false"
          :on-change="handleChange1">
          <img style="width:100px;" v-if="form.icon" :src="form.icon" class="avatar" />
          <el-button v-else type="warning">上传图片</el-button>
        </el-upload>
        <el-input style="display:none;" v-model="form.icon" autocomplete="off" />
      </el-form-item>
      <el-form-item label="上传封面" prop="pic" label-width="100px">
        <el-upload class="avatar-uploader" action="" :auto-upload="false" :show-file-list="false"
          :on-change="handleChange2">
          <img style="width:100px;" v-if="form.pic" :src="form.pic" class="avatar" />
          <el-button v-else type="warning">上传图片</el-button>
        </el-upload>
        <el-input style="display:none;" v-model="form.pic" autocomplete="off" />
      </el-form-item>
      <el-form-item label="排序" :rules="[{ required: true, message: '不能为空' }]" prop="paixu" label-width="100px">
        <el-input v-model="form.paixu" autocomplete="off" style="width:100px;" />
        &nbsp;<span> 数字越小，越靠前</span>
      </el-form-item>
      <el-form-item label="状态" :rules="[{ required: true, message: '不能为空' }]" prop="isUse" label-width="100px">
        <el-select v-model="form.isUse" placeholder="Please select a zone">
          <el-option label="启用" value="true" />
          <el-option label="禁用" value="false" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, onMounted, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Search, Plus } from "@element-plus/icons-vue";
import { categoryList, categoryAdd,categoryDel } from "../api/newCate"
import { shopList } from "../api/goods"
import { newsCategoryList } from "../api/news"
import { uploadFile } from "../api/index"

let select = ref("")

let dialogFormVisible = ref(false)

let form = ref({
  name: "", //		名称
  linkUrl: "", //		链接地址
  remark: "", //		备注
  type: "", //		类型
  key: "", //		编号
  shopId: "", //		所属门店
  pid: "", //		上级分类
  icon: "", //		上传图标
  pic: "", //	上传封面
  paixu: "0", //	排序
  isUse: "true", //	状态
})

let tableData = ref([])

let ids = ref([])

// 选择
function handleSelectionChange(val) {
  ids.value = val.map(item => item.id)
}

// 批量删除
function onRemove() {
  // console.log("这是一个删除按钮")
  const pall = ids.value.map(item=>{
    return categoryDel({id:item})
  })
  Promise.all(pall).then(res=>{
    // console.log(res)
    ElMessage({
      type:"success",
      message:"批量删除成功"
    })
    getList()
  })
}

//文件改变时执行的钩子函数---上传图标
function handleChange1(val) {
  // console.log(val)
  let formData = new FormData();

  formData.append("upfile", val.raw)
  uploadFile(formData).then(res => {
    // console.log(res)
    form.value.icon = res.data.url
  })
}

// 删除分类
function remove(id) {
  console.log(id)
  ElMessageBox.confirm(
    '确认删除该数据嘛？',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    ElMessage({
      type: 'success',
      message: '删除成功',
    })
  })
}

//文件改变时执行的钩子函数---上传图片
function handleChange2(val) {
  // console.log(val)
  let formData = new FormData();

  formData.append("upfile", val.raw)
  uploadFile(formData).then(res => {
    // console.log(res)
    form.value.pic = res.data.url
  })
}

// 增加文章分类-提交
let addForm = ref()
function onSubmit() {
  addForm.value.validate(val => {
    // console.log(val)
    if (val) {
      categoryAdd(form.value).then(res => {
        dialogFormVisible.value = false;
        ElMessage({
          type: "success",
          message: "添加成功",
        });
        form.value = {
          name: "", //		名称
          linkUrl: "", //		链接地址
          remark: "", //		备注
          type: "", //		类型
          key: "", //		编号
          shopId: "", //		所属门店
          pid: "", //		上级分类
          icon: "", //		上传图标
          pic: "", //	上传封面
          paixu: "0", //	排序
          isUse: "0", //	状态
        }
        getList()
      })
    }
  })
}

// 获取分类列表
function getList() {
  categoryList().then(res => {
    // console.log(res)
    if (res.code === 0) {
      tableData.value = res.data
    }
  })
}

// 获取门店列表
let shops = ref([])
function getShopsList() {
  shopList().then(res => {
    if (res.code === 0) {
      shops.value = res.data.result
    }
  })
}

// 获取文章分类列表
let news = ref([])
function getNewsList() {
  newsCategoryList().then(res => {
    if (res.code === 0) {
      news.value = res.data
      // console.log(res)
    }
  })
}

onMounted(() => {
  getList()
  getShopsList()
  getNewsList()
})
</script>
<style lang="scss" scoped>
.head {
  display: flex;
  align-items: center;
}
</style>